<template>
	<div class="ml15 row">
		<i class="el-icon-refresh pr5" v-on:click="ReportEditFresh"></i>
		<el-dropdown>
			<span class="el-dropdown-link">
				{{ CountText }}<i class="el-icon-arrow-down el-icon--right"></i>
			</span>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item @click.native="CountTypeNameChange('自动刷新')"
					>自动刷新</el-dropdown-item
				>
				<el-dropdown-item @click.native="CountTypeNameChange('手动刷新')"
					>手动刷新</el-dropdown-item
				>
			</el-dropdown-menu>
		</el-dropdown>
		<p class="ml5 " v-show="CountText == '自动刷新'">{{ count }}s</p>
	</div>
</template>

<script>
export default {
	name: 'CountDown',
	data () {
		return {
			CountText: '自动刷新',
			count: '',
			timer: null,
		}
	},
	mounted () {
		this.getCode()
	},
	destroyed () {
		clearInterval( this.timer )
		this.timer = null
	},
	methods: {
		ReportEditFresh () { // 手动刷新
			const that = this
			that.$emit( 'CountFresh', true )
			clearInterval( that.timer )
			that.timer = null
			if ( !that.timer && that.CountText === '自动刷新' ) {
				that.getCode()
			}
		},
		CountTypeNameChange ( _text ) { // 切换刷新类型
			const that = this
			clearInterval( that.timer )
			that.timer = null
			if ( _text === '自动刷新' ) {
				setTimeout( () => {
					that.getCode()
				} )
			}
			that.CountText = _text
		},
		getCode () { // 倒计时
			const that = this
			const TIME_COUNT = 60
			if ( !that.timer && that.CountText === '自动刷新' ) {
				that.count = TIME_COUNT
				that.timer = setInterval( () => {
					if ( that.count > 0 && that.count <= TIME_COUNT ) {
						that.count--
						if ( that.count === 0 && that.CountText === '自动刷新' ) {
							that.$emit( 'CountFresh', true )
						}
					} else {
						clearInterval( that.timer )
						that.timer = null
						that.getCode()
					}
				}, 1000 )
			}
		},
	},
	props: {},

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.modeNavBar {
	height: 30px;
	widows: 100%;
	background: rgba(251, 251, 251, 1);
	border: 1px solid rgba(234, 234, 234, 1);
	border-left: 3px solid #0099fa;
	margin-bottom: 10px;
}
</style>
